import React from 'react'
import './login.css'
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
// import Particles from 'react-particles-js';
import Particles from 'react-tsparticles';
import particlesConfigure from './loginParticles'
import {withRouter} from 'react-router-dom'


function Login(props) {
  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    let obj = {
      default: true,
      id: 1,
      password: 123,
      region: '',
      roleId: 2,
      roleState: true,
      userName: values.username,
      role: {
        roleName: '超级管理员',
        rights: [
          "/home",
          '/user-manage',
          "/user-manage/list",
          "/right-manage",
          '/right-manage/role/list',
          '/right-manage/right/list',
          '/news-manage',
          '/news-manage/add',
          '/news-manage/draft',
          '/audit-manage',
          '/audit-manage/audit',
          '/audit-manage/list',
          '/news-manage/preview/:id',
          '/news-manage/update/:id',
          '/release-manage/AlreadyOffline',
          '/release-manage/AwaitRelease',
          '/release-manage/ReleaseList',
          '/release-manage',
          '/news-manage/category'
        ]
      }
    }
    localStorage.setItem('token', JSON.stringify(obj))
    props.history.push('/')
  };
  return (
    <div className="login">
      <Particles 
        className="par"
        params={particlesConfigure}
      />
      <div className="formCon">
        <div className="login-title">行星发动机管理系统(第三阶段)</div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: 'Please input your Username!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: 'Please input your Password!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <div className="btnBox">
              <Button 
                type="primary" 
                htmlType="submit" 
                className="login-form-button"
              >
                Log in
              </Button>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default withRouter(Login)